<template>
    <div class="symptomContainer">
        <div class="back" @click="goBack"></div>
        <div class="title"></div>
        <transition name="question" appear>
            <div class="question"></div>
        </transition>
        <div class="choose">
            <div :style="setActive(sicks.firstSick)" @click="sicks.firstSick = !sicks.firstSick">
                <div class="point" :style="setpointActive(sicks.firstSick)"></div>
                <p>月经不调</p>
            </div>
            <div :style="setActive(sicks.secondSick)" @click="sicks.secondSick = !sicks.secondSick">
                <div class="point" :style="setpointActive(sicks.secondSick)"></div>
                <p>肥胖</p>
            </div>
            <div :style="setActive(sicks.thirdSick)" @click="sicks.thirdSick = !sicks.thirdSick">
                <div class="point" :style="setpointActive(sicks.thirdSick)"></div>
                <p>痤疮</p>
            </div>
            <div :style="setActive(sicks.fourthSick)" @click="sicks.fourthSick = !sicks.fourthSick">
                <div class="point" :style="setpointActive(sicks.fourthSick)"></div>
                <p>多毛</p>
            </div>
        </div>
        <div class="notNext" v-if="isShow"></div>
        <div class="next" v-if="!isShow" @click="gotoLife"></div>
    </div>
</template>

<script>
    export default {
        name:'mySymptom',
        data(){
            return{
                sicks:{
                    firstSick:false,
                    secondSick:false,
                    thirdSick:false,
                    fourthSick:false
                },
                symptoms:''
            }
        },
        computed:{
            isShow:function(){
                if(this.sicks.firstSick || this.sicks.secondSick || this.sicks.thirdSick || this.sicks.fourthSick)
                    return false
                else
                    return true
            },
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            toShow(){
                this.showActive=!this.showActive
            },
            setActive(ifActive){
                return ifActive === true ? 'border: 1px solid #199efc; backgroundColor: #e5f4fe' : 'border: 1px solid #FFF ; backgroundColor: #FFF'
            },
            setpointActive(ifActive){
                return ifActive === true ? 'borderRight: 0.06rem solid #199efc' : 'borderRight: 0.06rem solid #F6F8FA'
            },
            gotoLife(){
                this.symptoms=this.allSymptoms()                
                localStorage.setItem('symptoms',this.symptoms)
                this.$router.push({
                    name:'life',
                })
            },
            allSymptoms(){
                let symptoms=''
                for(let i in this.sicks){
                    if(this.sicks[i]==true){
                        if(i=='firstSick'){
                            symptoms='月经不调'
                        }
                        else if(i=='secondSick'){
                            if(symptoms!=''){
                                symptoms=symptoms+',肥胖'
                            }
                            else{
                                symptoms='肥胖'
                            }
                        }
                        else if(i=='thirdSick'){
                            if(symptoms!=''){
                                symptoms=symptoms+',痤疮'
                            }
                            else{
                                symptoms='痤疮'
                            }
                        }
                        else if(i=='fourthSick'){
                            if(symptoms!=''){
                                symptoms=symptoms+',多毛'
                            }
                            else{
                                symptoms='多毛'
                            }
                        }
                    }
                }
                return symptoms
            }
        }
    }
</script>

<style scoped>
    .symptomContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow: hidden;
    }
    .back{
        background-image: url(../assets/img/0-icon@2x/0-18back.png);
        width: 0.48rem;
        height: 0.48rem;
        position: absolute;
        background-position: center;
        background-size: contain;
        top:1.12rem;
        left:.64rem;
    }
    .title{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-9sickKnow.png);
        width: 1.28rem;
        height: .68rem;
        background-position: center;
        background-size: contain;
        left: 3.1rem;
        top: 1.08rem;
    }
    .question{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-26symptom.png);
        width: 5.68rem;
        height: 1.54rem;
        background-position: center;
        background-size: contain;
        left: 0.8rem;
        top:2.28rem;
    }
    .choose{
        width: 6.86rem;
        position: absolute;
        top:5.32rem;
        left: 0.32rem;
    }
    .choose>div{
        width: 100%;
        height: 1.5rem;
        background-color: #FFF;
        border-radius: .2rem;
        font-size: .28rem;
        color: #333333;
        font-family: 'PingFangSC-Regular';
        display: flex;
        align-items: center;
        border: 1px solid #FFF;
        transition: all 0.5s;
        margin-bottom: 0.5rem;
    }
    .point{
        margin-left: 1.2rem;
        height: 0.5rem;
        border-right: 0.06rem solid #F6F8FA;
        margin-right: 0.3rem;
        border-radius: 0.04rem;
        transition: all 0.5s;
    }
    .notNext{
        background-image: url(../assets/img/0-icon@2x/0-21notNext.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
    .next{
        background-image: url(../assets/img/0-icon@2x/0-20next.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
</style>